import { DingdingOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { PageContainer, RouteContext } from '@ant-design/pro-components';
import '@umijs/max';
import React, { Fragment, useEffect, useState } from 'react';
import { Step } from 'rc-steps';
import { Badge, Button, Card, Empty, message, Popover, Steps, Typography } from 'antd';
import { listApplyInterfaceInfoByPageUsingGet } from '@/services/api-share-backhend/applyInterfaceInfoController';
import { useModel } from '@umijs/max';
import { getInterfaceInfoByIdUsingGet } from '@/services/api-share-backhend/interfaceInfoController';

/**
 * @en-US Add node
 * @zh-CN 添加节点
 * @param fields
 */

const ApplySchedule: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [datasource, setDatasource] = useState<API.ApplyInterfaceInfo[]>();

  const customDot = (dot: React.ReactNode, { status, item, index }) => {
    const finishContent = (
      <div>
        <div
          style={{
            marginTop: 4,
          }}
        >
          完成时间：
          {index === 0
            ? new Date(item.createTime).toLocaleString()
            : new Date(item.updateTime).toLocaleString()}
        </div>
      </div>
    );

    if (status === 'finish') {
      return (
        <Popover placement="topLeft" arrowPointAtCenter content={finishContent}>
          <span>{dot}</span>
        </Popover>
      );
    }

    //耗时
    const now = new Date();
    const createTime = new Date(item.createTime);
    const timeDifference = now - createTime;

    // 转换时间差为小时和分钟
    const hours = Math.floor(timeDifference / (1000 * 60 * 60));
    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    const popoverContent = (
      <div>
        <div
          style={{
            marginTop: 4,
          }}
        >
          耗时：{hours}小时{minutes}分
        </div>
      </div>
    );

    if (status === 'process') {
      return (
        <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
          <span>{dot}</span>
        </Popover>
      );
    }

    return dot;
  };
  const getData = async () => {
    const userId = initialState.loginUser.id;
    if (userId == null || userId == undefined) {
      message.error('请确认是否登录');
    } else {
      const res = await listApplyInterfaceInfoByPageUsingGet({ userId: userId });
      if (res.data == null || res.data == undefined) {
        message.error(res.message);
      } else {
        setDatasource(res.data.records);
      }
    }
  };

  useEffect(() => {
    getData();
  }, []);
  return (
      <PageContainer
          extra={[
            datasource === undefined || datasource === null || datasource.length === 0 ?null:(
                <Button key="refresh" type={'primary'} onClick={getData}>
              刷新
            </Button>)
          ]}
      >
        {datasource === undefined || datasource === null || datasource.length === 0 ? (
            <Empty />
        ) : (
            datasource.map((item, index) => (
                <Card
                    key={index}
                    title={`申请接口名:${item.interfaceName}`}
                    style={{
                      marginBottom: 24,
                    }}
                >
                  <RouteContext.Consumer>
                    {({ isMobile }) => (
                        <Steps
                            direction={isMobile ? 'vertical' : 'horizontal'}
                            progressDot={(dot, { status, index }) => customDot(dot, { status, item, index })}
                            current={item.status === 0 ? 1 : 2}
                        >
                          <Step
                              title="填写申请信息"
                              description={
                                <div>
                                  <Fragment>付款人姓名：{item.payerName}</Fragment>
                                </div>
                              }
                          />
                          <Step
                              title="管理员审核"
                              description={
                                <div>
                                  <Fragment>
                                    {item.status === 0
                                        ? '正在等待管理员查看'
                                        : item.status === 1
                                            ? '审核通过'
                                            : '审核未通过'}
                                  </Fragment>
                                  <div>
                                    {item.status === 0 ? (
                                        <a href="" disabled={true}>
                                          todo 催一下
                                        </a>
                                    ) : (
                                        <></>
                                    )}
                                  </div>
                                </div>
                              }
                          />
                          <Step title="完成" />
                        </Steps>
                    )}
                  </RouteContext.Consumer>
                </Card>
            ))
        )}
      </PageContainer>
  );


};
export default ApplySchedule;
